import React, { Component } from 'react';
import { createForm } from 'rc-form';
import { ToastTips } from '../../../../../common/toastTips/tosat';
import styles from './selectBar.css';
import cData from './cityData';
const searchImg = require('../../../../../icons/search.png');

class SelectBar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      cityData:cData,
      resultList:[],
    }
  }

  selectClick = () => {
    const { onClickInput } = this.props;
    this.props.form.validateFields((error, value) => {
      // console.log(error, value);
      if (error) {
        for (var i in error) {
          error[i].errors.map(e => ToastTips(e.message, 1500, null))
        }
        return;
      }

      const cityName = value.cityName;
      const allCity = this.state.cityData.initCityData();
      const selectList = [];
      let count = 0;
      let countaa = 0;
      for (var i = 0; i < allCity.length; i++) {
        const cList = allCity[i].cities;
        for (var j = 0; j < cList.length; j++) {
          const cId = cList[j].cityid;
          const cName = cList[j].name;
            // console.log('cName', cName);
          if(cName){
            if(cName.indexOf(cityName) >= 0){
              // if(selectList.length > 0){
              //   selectList.map((item, index) => {
              //     console.log(item,cName);
              //     if(item == cName){
              //       count++;
              //     }else {
              //       selectList.push(cName);
              //       countaa++;
              //     }
              //   })
              // }else{
              //   selectList.push(cName);
              // }
              selectList.push(cName);
            }
          }
        }
      }

      var resultList = [];
      var valueC = {};
      for(var i = 0; i < selectList.length; i++){
       if(!valueC[selectList[i]]){
        resultList.push(selectList[i]);
        valueC[selectList[i]] = 1;
       }
      }

      if(resultList.length > 0){
        onClickInput(true)
      }
      // console.log('newCityDataList', JSON.stringify(resultList))
      this.setState({
        resultList
      })
    });
  }

  render(){
    const { getFieldProps, getFieldError, getFieldDecorator, setFieldsValue } = this.props.form;
    const { isShow, onClickInput, selectView } = this.props;
    const { resultList } = this.state;

    const getFocus = () => {
      console.log('获取焦点');
      onClickInput(true)
    }

    const closeView = () => {
      // console.log('失去焦点');
      onClickInput(false)
    }


    return(
      <div>
        <div className={styles.selectBarBody}>
          <div className={styles.content}>
            <div className={styles.searchInput} onClick={() => {}}>
              <img src={searchImg} />
              <input type="text"
                {...getFieldProps('cityName',{
                  rules: [
                    { required: true, message: '请输入城市名称' }
                  ]
                })}
                placeholder="搜索城市"
                className={styles.selectBarInputStyle}
                onFocus={() => getFocus()}
                // onBlur={()=> getBlur()}
              />
            </div>
            <div className={styles.selectedText}>
              <span onClick={() => this.selectClick()}>搜索</span>
            </div>
          </div>
        </div>
        {isShow ? (
          <div className={styles.selectBarItemBody} onClick={() => closeView()}>
            <div className={styles.selectBarItemContent}>
              {resultList.length > 0 ? (
                resultList.map((item, index) => (
                  <div
                    key={index.toString()}
                    className={styles.selectBarItemBodyItem}
                    onClick={() => selectView(item)}>
                    {item}
                  </div>
                ))
              ):''}
            </div>
          </div>
        ):''}
      </div>
    )
  }

}

export default createForm()(SelectBar);
